/**
* Created by ren on 2017/1/6.
*/
<template>
  <div class='voucher' style="padding-top: 20px">
    <template v-if="_parentThis.voucherChild==='parent'">
      <template v-if="goodsData!==''&&goodsData.content.length>0">
        <div :class="{dis:item.isValidity===1}" v-for="(item,index) in goodsData.content"
             style="height: 160px;position:relative;height: 160px;background: #f5f5f5;border-left:20px solid #ff9900;margin: 0 23px 20px 10px ">
          <div style="float: left;width: 283px;text-align: center;border-right: 1px dashed #999;margin-right: 90px">
            <div style="font-size: 18px;color: #ff9900;margin-top: 22px;margin-bottom: 30px">¥<span
              style="font-size: 48px">{{item.couponsPrice/100}}</span></div>
            <div style="font-size: 16px">使用码：{{item.couponCode}}</div>
            <img src="../../assets/old.png" alt=""
                 style="position: absolute;top: 0;right: 0;margin-right: 50px;margin-top: 30px;display: none">
          </div>
          <div style="float:left;font-size: 20px;margin-top: 30px">
            <div style="margin-bottom: 10px">{{item.couponsName}}</div>
            <div style="margin-bottom: 10px">有效期至：{{item.validity}}</div>
            <div>{{item.useRange}}</div>
          </div>
        </div>
      </template>
      <div v-else style="text-align: center;padding-top: 204px">
        <img src="../../assets/null.png" style="margin-bottom: 40px">
        <div>暂时没有优惠券哦，快去首页看看吧~</div>
      </div>
    </template>
    <template v-if="_parentThis.voucherChild==='aboutVoucher'">
      <AboutVoucher></AboutVoucher>
    </template>
    <div style="margin-top: 10px;position: absolute;top: 36px;right: 15px;font-size: 18px"
         v-if="_parentThis.voucherChild==='parent'">
      <span style="float:right;color:#e6760a;cursor: pointer" @click="cut('aboutVoucher')">查看优惠券说明？</span>
    </div>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  import AboutVoucher from './AboutVoucher'
  export default {
    name: 'voucher',
    components: {
      Notify,
      AboutVoucher
    },
    props: ['_parentThis'],
    data: function () {
      return {
        notifyStatus: 2,
        nextPage: 0,
        goodsData: ''
      }
    },
    methods: {
      cut: function (name) {
        this._parentThis.voucherChild = name
        switch (name) {
          case 'parent':
            this._parentThis.titHtml = '<span>我的优惠券</span>'
            break
          case 'aboutVoucher':
            this._parentThis.titHtml = '<span>我的优惠券 > <span style="color: #f48315;">关于优惠券</span></span>'
            break
        }
      },
      findMycouponsList: function () {
        this.$http.post(API.findMycouponsList, {
          userId: this.$cookie.get('id'),
          nextPage: this.nextPage,
          pageSize: 10
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goodsData = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      this._parentThis.cutName = 'voucher'
      this._parentThis.titHtml = '<span>我的优惠券</span>'
      this.findMycouponsList()
    }
  }
</script>
